<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>川邮云计算国际班 - 幸运抽奖</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: linear-gradient(to bottom, #0c0d19, #3800ccf5);
            color: white;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            height: 100vh;
        }

        #qt {
            width: 30%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;

        }

        #qrCode {
            text-align: center;
            position: fixed;
            top: 5px;
            left: 10px;
        }

        #qrCode img {
            width: 300px;
            height: 300px;
        }

        #controller {
            position: fixed;
            bottom: 10px;
            left: 10px;
        }

        #controller div {
            margin: 10px 0;
        }

        #startButton {
            padding: 10px 20px;
            font-size: 24px;
            background-color: #ff0000;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            height: 70px;
            /* margin-left: 150px; */
            width: 50%;
            margin-top: 5px;
        }

        #startButton:disabled {
            background-color: gray;
            cursor: not-allowed;
        }

        #xs {
            width: 70%;
            padding: 20px;
            overflow-y: auto;

        }

        #container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            max-width: 100%;
            margin: 20px auto;
        }

        .student-item {
            width: 95px;
            height: 40px;
            border: 1px solid #ccc;
            display: flex;
            font-size: 14px;
            justify-content: center;
            text-align: center;
            align-items: center;
            margin-bottom: 25px;
            padding: 5px;
            margin-left: 5px;
            background-color: #f9f9f9;
            color: #333;
            border-radius: 5px;

        }

        .student-item.highlight {
            background-color: #FFD700;
            color: black;
        }

        /* 自定义弹窗样式 */
        #customPopup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
            z-index: 1000;
            animation: fadeIn 0.5s ease-out;
        }

        #popupContent {
            background: linear-gradient(135deg, #ff6347, #ff4500, #ff1493);
            color: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            width: 400px;
            height: 300px;
            text-align: center;
            transform: scale(0);
            animation: popupAnimation 1s forwards;

        }

        #popupContent h3 {
            font-size: 30px;
            font-weight: bold;
            margin: 20px 0;
        }

        #popupMessage {
            font-size: 35px;
            margin-bottom: 20px;
            font-weight: 900;
        }

        #popupCloseButton {
            padding: 12px 24px;
            background-color: #ffcc00;
            color: black;
            font-weight: bold;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            transition: all 0.3s ease;
            margin-top: 50px;
            height: 60px;
            width: 120px;

        }

        #popupCloseButton:hover {
            background-color: #ffb300;
            transform: scale(1.05);
        }

        #controller {
            font-size: 24px;
            width: 30%;
            /* 奖项名单字体变大 */
        }

        #huojiangren {
            height: 200px;
            width: 100%;

        }


        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes popupAnimation {
            from {
                transform: scale(0);
            }

            to {
                transform: scale(1);
            }
        }

        @keyframes fadeInMessage {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div id="qt">
        <div id="qrCode">
            <h2>四川邮电职业技术学院</h2>
            <h3>计网.云计算方向22级毕业幸运轮</h3>
            <img src="/static/img/jiafen.png" alt="QR Code">
        </div>
        <div id="controller">
            <label for="huojiangren">获奖人:</label>
            <div id="huojiangren"></div>
            <div>开发者: 罗老师 何泽栋 黄俊杰 杨松涛</div>
            <button id="startButton" disabled>等待连接</button>
        </div>
    </div>

    <div id="xs">
        <div id="container"></div>
    </div>

    <!-- 自定义弹窗 -->
    <div id="customPopup">
        <div id="popupContent">
            <h3>恭喜您！</h3>
            <p id="popupMessage"></p>
            <button id="popupCloseButton">关闭</button>
        </div>
    </div>

    <script>
        let zhongjiangIndex = 0;
        let containerDiv;
        let students = null;

        document.addEventListener('DOMContentLoaded', function () {
            const startButton = document.getElementById('startButton');
            containerDiv = document.getElementById('container');
            students = document.querySelectorAll('.student-item');
            const startDelay = 20;
            let currentIndex = 0;
            let delay = startDelay;
            let currentItem;
            let clickNum = 0;

            startButton.addEventListener('click', function () {
                if (clickNum === 0) {
                    startButton.textContent = "停止转动";
                    startButton.disabled = false;
                    doIt();
                } else {
                    startButton.textContent = "正在减速...";
                    startButton.disabled = true;
                }
                clickNum++;
            });

            function doIt() {
                if (currentItem) {
                    currentItem.style.backgroundColor = '#f9f9f9';
                }
                currentItem = null;
                currentItem = students[currentIndex];
                currentItem.style.backgroundColor = '#FFD700';
                currentIndex++;
                if (currentIndex >= students.length) {
                    currentIndex = 0;
                }
                if (clickNum > 1) {
                    delay *= 1.08;
                }
                if (delay >= 1000) { 
                    appendZhongjiang(currentItem.innerHTML);
                    startButton.textContent = "抽奖成功";
                    setTimeout(() => {
                        clickNum = 0;
                        delay = startDelay;
                        startButton.textContent = "开始幸运轮";
                        startButton.disabled = false;
                        containerDiv.removeChild(currentItem);
                        students = document.querySelectorAll('.student-item');
                        currentIndex = 0;
                    }, 2000);
                    return;
                }
                setTimeout(doIt, delay);
            }

            function appendZhongjiang(namesn) {
                let nameAndSn = namesn.split("<br>")
                document.getElementById("huojiangren").innerHTML += `  ${nameAndSn[0]} 、`;
                zhongjiangIndex++;
                showPopup(namesn);
            }

            function showPopup(name) {
                // 更新弹窗消息内容
                document.getElementById("popupMessage").innerHTML = `恭喜 ${name} 中奖！`;
                // 显示弹窗
                document.getElementById("customPopup").style.display = "flex";
            }

            // 关闭弹窗
            document.getElementById("popupCloseButton").addEventListener("click", function () {
                document.getElementById("customPopup").style.display = "none";
            });

            let url = "";
            if (window.location.href.indexOf("https://") === 0) {
                url = 'wss://' + window.location.host + '/ws/loadPersons';
            } else {
                url = 'ws://' + window.location.host + '/ws/loadPersons';
            }

            const socket = new WebSocket(url);

            socket.onopen = function () {
                document.getElementById("startButton").textContent = "开始幸运轮";
                document.getElementById("startButton").disabled = false;
                // let namesn = "何泽栋<br>220320205001"
                // sn = namesn.split("<br>");
                // enteredTexts.push(sn[1]);
                // let personDiv = document.createElement('div');
                // personDiv.className = "student-item";
                // personDiv.innerHTML = namesn;
                // containerDiv.appendChild(personDiv);

                // namesn = "tyty<br>444"
                // sn = namesn.split("<br>");
                // enteredTexts.push(sn[1]);
                // personDiv = document.createElement('div');
                // personDiv.className = "student-item";
                // personDiv.innerHTML = namesn;
                // containerDiv.appendChild(personDiv);


                // namesn = "66<br>66"
                // sn = namesn.split("<br>");
                // enteredTexts.push(sn[1]);
                // personDiv = document.createElement('div');
                // personDiv.className = "student-item";
                // personDiv.innerHTML = namesn;
                // containerDiv.appendChild(personDiv);

                // namesn = "5<br>555"
                // sn = namesn.split("<br>");
                // enteredTexts.push(sn[1]);
                // personDiv = document.createElement('div');
                // personDiv.className = "student-item";
                // personDiv.innerHTML = namesn;


                // containerDiv.appendChild(personDiv);


                students = document.querySelectorAll('.student-item');


            };

            const enteredTexts = [];

            socket.onmessage = function (event) {
                if (event.data && event.data.length > 0) {
                    let sn = event.data.split("<br>");
                    if (enteredTexts.includes(sn[1])) {
                        return;
                    }

                    enteredTexts.push(sn[1]);
                    const personDiv = document.createElement('div');
                    personDiv.className = "student-item";
                    personDiv.innerHTML = event.data;
                    containerDiv.appendChild(personDiv);
                    students = document.querySelectorAll('.student-item');

                }
            };

            socket.onclose = function () {
                document.getElementById("startButton").textContent = '连接已关闭';
                document.getElementById("startButton").disabled = true;
            };

            socket.onerror = function (error) {
                document.getElementById("startButton").textContent = '发生错误: ' + error.message;
                document.getElementById("startButton").disabled = true;
                socket.close();
            };
        });
    </script>
</body>

</html>